<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="详情"
        @click-left="$router.go(-1)"
        left-arrow
        style="width: 100%;"
      >
      <van-icon slot="right" name="weapp-nav" />
      </van-nav-bar>
    </header>
    <div class="content">
      <div class="info" v-for="(item,index) in data" :key="index">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(img,index) of item.imgurl" :key="index">
            <van-image
              width="100%"
              mode="fill"
              :src="img"
            />
          </van-swipe-item>
        </van-swipe>
        <div class="proinfo">
          <div class="proinfo-head">
            {{item.product_dsc}}
            <span>{{item.tag}}</span>
          </div>
          <div class="proinfo-body">
            <div class="proinfo-body-price">
              <span class="sjg">￥{{item.now_price}}</span>
              <span class="jg">￥{{item.old_price}}</span>
            </div>
            <div class="proinfo-body-sales">
              已售<span>{{item.sells}}</span>件
            </div>
          </div>
        </div>
        <div class="detailinfo">
          <div class="detailinfo-item">
            <div class="detailinfo-item-title">花语</div>
            <div class="detailinfo-item-desc">{{item.says}}</div>
          </div>
          <div class="detailinfo-item">
            <div class="detailinfo-item-title">材料</div>
            <div class="detailinfo-item-desc">{{item.product_dsc}}</div>
          </div>
          <div class="detailinfo-item">
            <div class="detailinfo-item-title">配送</div>
            <div class="detailinfo-item-desc">全国(小城市请提前一天预定)</div>
          </div>
          <div class="detailinfo-item">
            <div class="detailinfo-item-title">附送</div>
            <div class="detailinfo-item-desc">下单填写留言，即免费赠送精美贺卡！</div>
          </div>
        </div>
        <div class="sku">
          <div class="metia">
            <div class="metia-left">已选</div>
            <div class="metia-center">{{item.product_info}}</div>
            <div class="metia-right">...</div>
          </div>
          <div class="metia">
            <div class="metia-left">配送至</div>
            <div class="metia-center">请选择配送地区</div>
            <div class="metia-right">...</div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-head">
            <div class="panel-head-title">
              订单评价
            </div>
            <div class="panel-head-link">
              最近已有56条评价
            </div>
          </div>
          <div class="panel-body">
            <div class="comments-item">
              <div class="conmments-item-head">
                <div class="conmments-item-head-left">
                Youn* 许济洋
                </div>
                <div class="conmments-item-head-right">
                  <van-image
                    width="100%"
                    height="100%"
                    mode="fill"
                    src="https://img02.hua.com/m/pro_detail/star5.png"
                  />
                </div>
              </div>
              <div class="conmments-item-content">
                早上出门买早餐的时候悄悄带回来的。上次买花送她还是女朋友，现在已经喊我老公了（虽然还不是真的老公哈哈），她表示很惊喜，很满意，一直在说花很美，搭配的很好！
              </div>
              <div class="comments-item-imglist">
                <div class="comments-item-imglist-item">
                  <van-image
                    width="100%"
                    height="100%"
                    mode="fill"
                    src="https://img.hua.com/reviewpic/m/2020/03/09/3df14a3ba9a749fc9cb90844e55e02dc.jpg"
                  />
                </div>
              </div>
              <div class="comments-item-address">
                广东省梅州市梅县区
              </div>
            </div>
          </div>
          <div class="panel-footer">
            <div class="comments-more">
              <a href="">查看更多评价</a>
            </div>
          </div>
        </div>
        <div class="well">
          <div class="well-title">
            <h4>为什么选择我们</h4>
          </div>
          <div class="well-body">
            <ul class="brandlist">
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_01.png"
                 />
                <p>荣获鲜花龙头企业</p>
              </li>
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_02.png"
                 />
                <p>当日鲜花制作</p>
              </li>
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_03.png"
                 />
                <p>赛事冠军花艺师团队</p>
              </li>
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_04.png"
                 />
                <p>严选花材</p>
              </li>
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_05.png"
                 />
                <p>12道严苛品控标准</p>
              </li>
              <li class="brandlist-item">
                <van-image
                  round
                  width="64px"
                  height="64px"
                  src="https://img02.hua.com/m/pro_detail/m_details_brand_06.png"
                 />
                <p>500万用户信赖好评</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="panel">
          <div class="panel-head">
            <div class="panel-head-title">
              图文详情
            </div>
          </div>
          <div class="panel-body">
            <div class="proimgdetails">
              <van-image v-for="(img,index) of item.imgs" :key="index"
                width="100%"
                :src="img"
                />
            </div>
          </div>
        </div>
      </div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
        <van-goods-action-icon :icon="collecticon" @click="collect" :text="collecticon === 'star-o' ? '收藏' : '已收藏'" color="#ff5000" />
        <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getDetailData, addCart } from '@/api'
import { Swipe, SwipeItem, Lazyload, Image, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, Toast } from 'vant'
Vue.use(Swipe) // Vue.use - 注册的组件
Vue.use(SwipeItem) // Vue.use - 注册的组件
Vue.use(Lazyload) // Vue.use - 注册的组件
Vue.use(Image)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Toast)
export default {
  data () {
    return {
      data: [],
      collecticon: 'star-o'
    }
  },
  mounted () {
    // console.log(this.$route.params)
    const { productid } = this.$route.params
    this.productid = productid
    // 进入页面即可判断有没有改数据 - 取得proid之后
    const arrStr = localStorage.getItem('collection') || '[]'
    const arr = JSON.parse(arrStr)
    const index = arr.indexOf(this.productid)
    if (index !== -1) { // 查到改数据
      this.collecticon = 'star'
    } else { // 未查到数据
      this.collecticon = 'star-o'
    }
    getDetailData({ productid }).then(res => {
      // console.log(res.data.data)
      this.data = [res.data.data]
      // 传值给浏览器
      const productid = res.data.data.productid
      const imgurl = res.data.data.imgurl[0]
      const productinfo = res.data.data.product_info
      const productdsc = res.data.data.product_dsc
      const nowprice = res.data.data.now_price
      const arrStr2 = localStorage.getItem('hislist') || '[]'
      const arr2 = JSON.parse(arrStr2)
      // 判断 arr中有没有该产品id，如果有则删除 如果没有则加入
      function findProductid (fruit) {
        return fruit.productid === productid
      }
      // console.log(arr2.find(findProductid))
      const index2 = arr2.find(findProductid)
      //  判断是否有这个id，有则不做操作，没有则添加
      if (index2 === undefined) {
        arr2.push({ productid, imgurl, productinfo, productdsc, nowprice })
      }
      localStorage.setItem('hislist', JSON.stringify(arr2))
      // console.log(arr2)
    })
  },
  methods: {
    collect () {
      // 本地会储存一个数组，数组的元素就是就是收藏的每一个产品id,如果没得collection，就增加一个空数组最后存为collection
      const arrStr = localStorage.getItem('collection') || '[]'
      const arr = JSON.parse(arrStr)
      // 判断 arr中有没有该产品id，如果有则删除 如果没有则加入
      const index = arr.indexOf(this.productid)
      if (index !== -1) {
        arr.splice(index, 1)
        this.collecticon = 'star-o'
      } else {
        arr.push(this.productid)
        this.collecticon = 'star'
      }
      localStorage.setItem('collection', JSON.stringify(arr))
    },
    addCart () {
      // 判断用户是不是登陆状态
      if (localStorage.getItem('loginState') === 'ok') {
        // 登陆
        addCart({
          userid: localStorage.getItem('userid'),
          productid: this.productid,
          num: 1
        }).then(res => {
          const { code } = res.data
          if (code === '200') {
            Toast('加入购物车成功')
          } else if (code === '10101') {
            Toast('加入失败')
          }
        })
      } else {
        // 未登录
        this.$router.push('/login')
      }
    }
  }
}
</script>
<style lang="scss">
.box{
  .content{
    .info{
      background:#c0c0c0;
      margin-bottom:20%;
      .proinfo{
        padding:10px 10px;
        margin:0px auto;
        background:#fff;
        .proinfo-head{
          span{
            color:#FF734C;
          }
        }
        .proinfo-body{
          display:flex;
          justify-content:space-between;
          .proinfo-body-price{
            .sjg{
              font-size: 20px;
              color: #FF734C;
              font-weight: 600;
            }
            .jg{
              color: #B4BABF;
              margin-left: 10px;
              font-size: 14px;
            }
          }
          .proinfo-body-sales{
            font-size: 12px;
            text-align: right;
          }
        }
      }
      .metail{
        background:#fff;
        margin-bottom:10px;
        height:51px;
        padding:10px 10px;
      }
      .detailinfo{
        background:#fff;
        padding:10px 10px;
        margin-bottom:10px;
        .detailinfo-item{
          display:flex;
          font-size:12px;
          .detailinfo-item-title{
            width:42px;
            min-width:42px;
            font-weight:500;
            color:#232323;
            padding:12px 0px;
          }
          .detailinfo-item-desc{
            flex:1;
            padding:12px 0px;
            justify-content: center;
            border-bottom:1px solid #c0c0c0;
          }
        }
      }
      .sku{
        background:#fff;
        .metia{
          height:48px;
          display:flex;
          padding:14px 16px;
          .metia-left{
            width:42px;
            max-width:42px;
            font-size:12px;
            font-weight:500;
            line-height:20px;
          }
          .metia-center{
            flex:1;
          }
          .metia-right{
            width:16px;
            text-align:right;
            font-size:12px;
          }
        }
      }
      .panel{
        background:#fff;
        margin-top:10px;
        .panel-head{
          display:flex;
          align-items:center;
          padding:12px 16px;
          overflow:hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .panel-head-title{
            flex:1;
            font-size:16px;
          }
          .panel-head-link{
            flex:1;
            font-size:12px;
            color:#71797f;
            text-align:right;
          }
        }
        .panel-body{
          border-top:1px solid #e9ecf0;
          .comments-item{
            padding:14px 16px;
            .conmments-item-head{
              display:flex;
              align-items:center;
              .conmments-item-head-left{
                flex:1;
              }
              .conmments-item-head-right{
                width:60px;
                max-width:60px;
                min-width:60px;
                // height:9px;
                overflow:hidden;
                text-align:right;
              }
            }
            .comments-item-content{
              margin-top:10px;
              font-size:13px;
            }
            .comments-item-imglist{
              margin-top:10px;
              display:flex;
              position:relative;
              height:80px;
              .comments-item-imglist-item{
                flex:1;
                width:80px;
                max-width:80px;
                height:80px;
                image{
                  width:100%;
                  height:100%;
                }
              }
            }
            .comments-item-address{
              margin-top:8px;
              color:#b4babf;
              font-size:12px;
              overflow:hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .panel-footer{
          .comments-more{
            text-align:center;
            padding:8px 0px 24px;
            a{
              display:inline-block;
              font-size:12px;
              border:1px solid #232628;
              padding:4px 8px;
              border-radius:5px;
              color:black;
            }
          }
        }
      }
      .well{
        background:#fff;
        padding:10px 10px;
        margin-top:10px;
        .well-title{
          text-align:center;
          overflow:hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding:24px 16px 14px;
          h4{
            display:inline-block;
            font-size:16px;
            padding:0px 12px;
          }
        }
        .well-body{
          height:236px;
          padding:0px 16px 16px;
          .brandlist{
            list-style:none;
            .brandlist-item{
              float:left;
              width:33%;
              height:86px;
              text-align:center;
              margin-top:24px;
              p{
                font-size:12px;
                padding:2px 0px 4px;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }

  }
}
</style>
